<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>守护云健康管家</title>
    <meta name="description" content="守护云健康管家">
    <meta name="keywords" content="守护云健康管家">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
</head>
<body class="hold-transition">
<div id="app">
    <div class="content-header">
        <h1>挂号预约<small>选择医生挂号</small></h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>挂号预约</el-breadcrumb-item>
            <el-breadcrumb-item>选择医生挂号</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="app-container">
        <div class="box">
            <div class="filter-container">
                <el-input placeholder="科室名称" v-model="pagination.queryString" style="width: 200px;" class="filter-item"></el-input>
                <el-button type="success" @click="findPage()" class="dalfBut" icon="el-icon-search">查询</el-button>
            </div>
            <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
                <el-table-column type="index" align="center" label="序号"></el-table-column>
                <el-table-column prop="userRealName" label="姓名" align="center"></el-table-column>
                <el-table-column prop="userPosition" label="职位" align="center"></el-table-column>
                <el-table-column align="center" show-overflow-tooltip label="科室">
                    <template slot-scope="scope">
                        {{ scope.row.department + '/' + scope.row.secondDepartment }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="" size="mini" plain @click="getDoctorInfo(scope.row)">详细信息</el-button>
                        <el-button type="success" size="mini" plain @click="initPage(scope.row)">挂号</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination
                        class="pagiantion"
                        @current-change="handleCurrentChange"
                        :current-page="pagination.currentPage"
                        :page-size="pagination.pageSize"
                        layout="total, prev, pager, next, jumper"
                        :total="pagination.total">
                </el-pagination>
            </div>

            <!-- 医生详情 -->
            <el-dialog title="医生详情" top="5vh" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="doctorInfoDialog" width="50%" :before-close="handleInfoClose">
                <page-title class="page-title" title="基础信息" style="margin-bottom: 20px;"></page-title>
                <div class="head">
                    <div class="image">
                        <img style="object-fit: cover;" width="160px" height="200px" :src="doctorInfo.userWorkAvatar" alt="工作执照" />
                    </div>
                    <div class="base-info">
                        <div style="display: table-cell;vertical-align: middle;">
                            <div class="name">
                                <span style="font-size: 20px;color: #333333;">{{ doctorInfo.userRealName }}</span>
                                <span style="padding-left: 15px;color: #909399;font-size: 16px;">{{ doctorInfo.userPosition}}</span>
                            </div>
                            <div style="padding-top: 5px;">
                                <el-row class="row-item">
                                    <el-col :span="5" class="sec-color">

                                        <span>所属科室:</span>
                                    </el-col>
                                    <el-col :span="15" class="fir-color">
                                        <span>{{ doctorInfo.department + '-' + doctorInfo.secondDepartment }}</span>
                                    </el-col>
                                </el-row>
                                <el-row class="row-item">
                                    <el-col :span="5" class="sec-color">
                                        <!--<i class="el-icon-phone"></i>-->
                                        <span>联系电话:</span>
                                    </el-col>
                                    <el-col :span="15" class="fir-color">
                                        <span>{{ doctorInfo.userTel }}</span>
                                    </el-col>
                                </el-row>
                                <!--<el-row class="row-item">
                                    <el-col :span="5" class="sec-color">
                                        <i class="el-icon-s-promotion"></i>
                                        <span>联系邮箱:</span>
                                    </el-col>
                                    <el-col :span="15" class="fir-color">
                                        <span>{{ doctorInfo.userEmail }}</span>
                                    </el-col>
                                </el-row>-->
                                <el-row class="row-item">
                                    <el-col :span="5" class="sec-color">
                                        <!--<i class="el-icon-location"></i>-->
                                        <span>出诊地点:</span>
                                    </el-col>
                                    <el-col :span="22" class="fir-color">
                                        <span>{{ doctorInfo.userLocation }}</span>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                    </div>
                </div>
<!--                <page-title class="page-title" title="详细信息" style="margin-bottom: 20px;"></page-title>-->
                <div style="width: 100%;padding-left:25px">
                    <!--<el-row class="row-item">
                        <el-col :span="5" class="sec-color">
                            <i class="el-icon-map-location"></i>
                            <span>详细住址:</span>
                        </el-col>
                        <el-col :span="15" class="fir-color">
                            <span>{{ doctorInfo.userAddress }}</span>
                        </el-col>
                    </el-row>-->
                    <el-row class="row-item">
                        <el-col :span="5" class="sec-color">
                            <span>擅长领域:</span>
                        </el-col>
                        <el-col :span="20" class="fir-color">
                            <span>{{ doctorInfo.userSpecialties }}</span>
                        </el-col>
                    </el-row>
                </div>
            </el-dialog>

            <!-----------------------------------------挂号---------------------------------------->
            <el-dialog title="医生详情" top="5vh" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="doctorPbDialog" width="50%" :before-close="handleInfoClosePb">
                <el-table stripe :data="dutyList" border v-loading="loading">
                    <el-table-column align="center" prop="userRealName" label="姓名" fixed></el-table-column>
                    <el-table-column align="center" label="周一">
                        <el-table-column align="center" label="上午" >
                            <template slot-scope="scope">
                                <el-button class="tag" size="mini" :type="getType(scope.row.monMorning)" >{{ getStstus(scope.row.monMorning) }}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="下午" >
                            <template slot-scope="scope">
                                <el-button class="tag" size="mini" :type="getType(scope.row.monAfternoon)" >{{ getStstus(scope.row.monAfternoon) }}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="夜班" >
                            <template slot-scope="scope">
                                <el-button class="tag" size="mini" :type="getType(scope.row.monNight)" >{{ getStstus(scope.row.monNight) }}</el-button>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="周二">
                        <el-table-column align="center" label="上午" >
                            <template slot-scope="scope">
                                <el-button class="tag" size="mini" :type="getType(scope.row.tueMorning)" >{{ getStstus(scope.row.tueMorning) }}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="下午" >
                            <template slot-scope="scope">
                                <el-button class="tag" size="mini" :type="getType(scope.row.tueAfternoon)" >{{ getStstus(scope.row.tueAfternoon) }}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="夜班" >
                            <template slot-scope="scope">
                                <el-button class="tag" size="mini" :type="getType(scope.row.tueNight)" >{{ getStstus(scope.row.tueNight) }}</el-button>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="周三">
                        <el-table-column align="center" label="上午" >
                            <template slot-scope="scope">
                                <el-button class="tag" size="mini" :type="getType(scope.row.wedMorning)" >{{ getStstus(scope.row.wedMorning) }}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="下午" >
                            <template slot-scope="scope">
                                <el-button class="tag" size="mini" :type="getType(scope.row.wedAfternoon)" >{{ getStstus(scope.row.wedAfternoon) }}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="夜班" >
                            <template slot-scope="scope">
                                <el-button class="tag" size="mini" :type="getType(scope.row.wedNight)" >{{ getStstus(scope.row.wedNight) }}</el-button>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="周四">
                        <el-table-column align="center" label="上午" >
                            <template slot-scope="scope">
                                <el-button class="tag" size="mini" :type="getType(scope.row.thurMorning)" >{{ getStstus(scope.row.thurMorning) }}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="下午" >
                            <template slot-scope="scope">
                                <el-button class="tag" size="mini" :type="getType(scope.row.thurAfternoon)" >{{ getStstus(scope.row.thurAfternoon) }}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="夜班" >
                            <template slot-scope="scope">
                                <el-button class="tag" size="mini" :type="getType(scope.row.thurNight)" >{{ getStstus(scope.row.thurNight) }}</el-button>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="周五">
                        <el-table-column align="center" label="上午" >
                            <template slot-scope="scope">
                                <el-button class="tag" size="mini" :type="getType(scope.row.friMorning)" >{{ getStstus(scope.row.friMorning) }}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="下午" >
                            <template slot-scope="scope">
                                <el-button class="tag" size="mini" :type="getType(scope.row.firAfternoon)" >{{ getStstus(scope.row.firAfternoon) }}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="夜班" >
                            <template slot-scope="scope">
                                <el-button class="tag" size="mini" :type="getType(scope.row.firNight)" >{{ getStstus(scope.row.firNight) }}</el-button>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="周六">
                        <el-table-column align="center" label="上午" >
                            <template slot-scope="scope">
                                <el-button class="tag" size="mini" :type="getType(scope.row.satMorning)" >{{ getStstus(scope.row.satMorning) }}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="下午" >
                            <template slot-scope="scope">
                                <el-button class="tag" size="mini" :type="getType(scope.row.satAfternoon)" >{{ getStstus(scope.row.satAfternoon) }}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="夜班" >
                            <template slot-scope="scope">
                                <el-button class="tag" size="mini" :type="getType(scope.row.satNight)" >{{ getStstus(scope.row.satNight) }}</el-button>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="周日">
                        <el-table-column align="center" label="上午" >
                            <template slot-scope="scope">
                                <el-button class="tag" size="mini" :type="getType(scope.row.sunMorning)" >{{ getStstus(scope.row.sunMorning) }}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="下午" >
                            <template slot-scope="scope">
                                <el-button class="tag" size="mini" :type="getType(scope.row.sunAfternoon)" >{{ getStstus(scope.row.sunAfternoon) }}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" label="夜班" >
                            <template slot-scope="scope">
                                <el-button class="tag" size="mini" :type="getType(scope.row.sunNight)" >{{ getStstus(scope.row.sunNight) }}</el-button>
                            </template>
                        </el-table-column>
                    </el-table-column>
                </el-table>

                <el-form ref="form" :model="formDataReg" :rules="rules" hide-required-asterisk size="medium">
                    <el-form-item>
                        <el-col :span="7">
                            <el-form-item label="就诊日期:" prop="publishTime" label-width="120px">
                                <el-date-picker
                                        v-model="formDataReg.publishTime"
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        placeholder="请选择就诊日期"
                                        :picker-options="pickerOptions"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="就诊时间" prop="visitTime">
                                <el-select placeholder="请选择就诊时间" v-model="formDataReg.visitTime">
                                    <el-option label="早上" value="早上"></el-option>
                                    <el-option label="下午" value="下午"></el-option>
                                    <el-option label="晚上" value="晚上"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-form-item>

                    <el-form-item prop="detail">
                        <el-input
                                v-model="formDataReg.detail"
                                placeholder="请在这里输入病情描述"
                                maxlength="30"
                                show-word-limit
                                class="filter-item title">
                        </el-input>
                    </el-form-item>

                    <el-form-item prop="remark">
                        <el-input
                                v-model="formDataReg.remark"
                                placeholder="请在这里输入备注"
                                maxlength="30"
                                show-word-limit
                                class="filter-item title">
                        </el-input>
                    </el-form-item>

                    <el-form-item class="btn" style="width: 100%">
                        <el-button type="success" class="filter-item el-button--has-icon" @click="publish()">提交</el-button>
                        <el-button type="danger" class="filter-item el-button--has-icon" @click="handleInfoClosePb()">取消</el-button>
                    </el-form-item>
                </el-form>

            </el-dialog>

        </div>
    </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        data:{
           /* const: validatePublishTime = (rule, value, callback) => {
                const draft = this.draft
                if (draft === undefined) {
                    return callback()
                }
                if (!draft) {
                    if (!value) {
                        return callback(new Error('请选择日期时间'))
                    }
                }
                callback()
            },
            const: validateTitle = (rule, value, callback) => {
                const draft = this.draft
                if (draft === undefined) {
                    return callback()
                }
                if (draft) {
                    if (!value) {
                        return callback(new Error('病情描述不能为空'))
                    }
                } else {
                    if (!value || value.length < 4) {
                        return callback(new Error('病情描述不能小于4个字符'))
                    }
                }
                callback()
            },*/
            pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize:10,//每页显示的记录数
                total:0,//总记录数
                queryString:null//查询条件
            },
            formDataReg: {
                publishTime: '',
                detail: '',
                remark: ''
            },
            pickerOptions: {
                disabledDate (time) {
                    return time.getTime() < Date.now() - 8.64e7 // - 8.64e7 表示可选择当天时间
                }
            },
            loading: false,
            draft: undefined,
            dataList: [],//当前页要展示的分页列表数据
            doctorInfo: {},
            doctorInfoDialog: false,
            doctorPbDialog: false,
            options: [],
            pbInfo: {},
            dutyList: [],
            provinceList: [],
            fileList: [],
            formData: {},//表单数据
            rules: {
                detail: [{ required: true, message: '必须填入病情描述', trigger: 'blur' },
                         { min: 1, max: 10, message: "长度不超过10个字符", trigger: "blur" }],
                publishTime: [{ required: true, message: '必须选择挂号日期', trigger: 'blur' }],
                visitTime: [{ required: true, message: '必须选择挂号时间', trigger: 'blur' }]
            }
        },
        //钩子函数，VUE对象初始化完成后自动执行
        created() {
            this.findPage();
        },
        methods: {
            //分页查询
            findPage() {
                //分页参数
                var param = {
                    currentPage:this.pagination.currentPage,//页码
                    pageSize:this.pagination.pageSize,//每页显示的记录数
                    queryString:this.pagination.queryString//查询条件
                };
                //请求后台
                axios.post("/reg/system/doctor/selectPageToApp",param).then((response)=> {
                    console.log(response)
                    //为模型数据赋值，基于VUE的双向绑定展示到页面
                    this.dataList = response.data.data.rows;
                    this.pagination.total = response.data.data.total;
                });
            },
            getStstus(index) {
                if(index === '1') {
                    return '出诊'
                } else if(index === '0') {
                    return '休息'
                } else if(index === '2') {
                    return '调休'
                }
            },
            getType(index) {
                if(index === '1') {
                    return 'primary'
                } else if(index === '2') {
                    return 'warning'
                } else if(index === '0') {
                    return 'success'
                }
            },
            initPage(row) {
                this.formDataReg = {};
                this.loading = true
                this.doctorPbDialog = true
                axios.get("/reg/system/duty/listByDepToApp/" + row.userNo).then((res) => {
                    let resData = res.data
                    if(resData.code === 200) {
                        this.dutyList = resData.data
                        this.loading = false
                        console.log(this.dutyList[0].doctorNo)
                    } else {
                        this.$message.error(resData.msg)
                        this.loading = false
                    }
                })
            },
            handleInfoClosePb() {
                this.doctorPbDialog = false;
                this.formDataReg = {}
            },
/*            doctorPb(row) {
                this.pbInfo = {}
                this.doctorPbDialog = true
                axios.get("/reg/system/doctor/PbInfo/" + row.userNo).then((res) => {
                    let resData = res.data
                    if(resData.code === 200) {
                        this.pbInfo = resData.data
                    } else {
                        this.$message.error("获取医生信息失败！")
                    }
                })
            },*/
            getDoctorInfo(row) {
                axios.get("/reg/system/doctor/info/" + row.userNo).then((res) => {
                    let resData = res.data
                    if(resData.code === 200) {
                        this.doctorInfo = resData.data
                        // 填入文件信息与地址信息
                        this.fileList = [{name: this.doctorInfo.userNo + '.jpg', url: this.doctorInfo.userWorkAvatar}]
                        /*let provinceId = this.provinceList.find(any => any.fullname === this.doctorInfo.userProvince).id*/
                        /*this.doctorInfo.province = provinceId*/
                        this.doctorInfoDialog = true
                    } else {
                        this.$message.error("获取医生信息失败！")
                    }
                })
            },
            publish() {
                this.$refs['form'].validate((valid)=>{
                    if(valid){
                        axios.post("/reg/system/patRegRecord/appReg/" + this.dutyList[0].doctorNo, this.formDataReg).then((res) => {
                            let resData = res.data
                            if(resData.code === 200) {
                                this.$message.success("挂号成功");
                                this.doctorPbDialog = false
                            } else {
                                this.$message.error(resData.msg)
                            }
                        }).finally(()=> {
                            this.doctorPbDialog = false;
                            //重新发送请求查询分页数据
                            this.findPage();
                        });
                    }else {
                        //表单校验失败
                        this.$message.error("表单数据校验失败，请重新填写");
                        return false;
                    }
                });
            },
            handleInfoClose() {
                this.doctorInfoDialog = false
                setTimeout(() => {
                    this.doctorInfo = {}
                    this.fileList = []
                }, 500)
            },
            //切换页码
            handleCurrentChange(currentPage) {
                //currentPage为切换后的页码
                this.pagination.currentPage = currentPage;
                this.findPage();
            },
        }
    })
</script>
</html>